<!-- 题目导出 预览 弹框 -->
<template>
  <el-dialog
    :show-close="false"
    title="预览"
    :visible="open"
    width="1120px"
    top="65px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @close="cancel()"
  >
    <div class="topicBox">
      <div class="topicContain">
        <div class="topic" v-for="(item, index) in topics" :key="index">
          <!-- 题目 -->
          <div class="topicTitle flex">
            <div class="topicType">{{ index + 1 }}.</div>
            <div class="topicType" v-if="checkedRadios.includes('题型')">
              【{{ topicTypeArr[item.topicType] }}】
            </div>
            <div
              class="topicTitleText text-indent"
              v-html="$renderedDescription(item.content)"
            ></div>
          </div>
          <!-- 选项 -->
          <div
            class="topicOptions"
            v-if="item.topicType == 0 || item.topicType == 1"
          >
            <div
              class="topicOptionItem flex"
              v-for="(option, optionIndex) in item.ccTopicOptionList"
              :key="optionIndex"
            >
              <div class="topicOptionA">{{ option.optionLabel }}.</div>
              <div
                class="topicOptionText"
                v-html="$renderedDescription(option.optionValue)"
              ></div>
            </div>
          </div>
          <!-- 答案 -->
          <div class="topicAnswer" v-if="checkedRadios.includes('答案')">
            <div class="topicAnswerText">
              答案： <span v-html="$renderedDescription(item.answer)"></span>
            </div>
          </div>
          <!-- 分数 -->
          <!-- <div class="topicScore">分值：{{ item.score }}</div> -->
          <!-- 难题程度 -->
          <div class="topicDifficulty" v-if="checkedRadios.includes('难度')">
            难度：{{ difficulty[item.difficulty] }}
          </div>
          <!-- 解析 -->
          <div class="topicAnalysis" v-if="checkedRadios.includes('解析')">
            <div class="topicAnalysisText">
              解析：<span v-html="$renderedDescription(item.resolve)"></span>
            </div>
          </div>

          <div
            class="topicDifficulty"
            v-if="checkedRadios.includes('选项选择比例') && item.topicType < 3"
          >
            选项选择比例：
            <!-- 不是判断题 -->
            <span
              v-if="item.topicType != 2"
              v-for="(option, optionIndex) in item.ccTopicOptionList"
              :key="optionIndex"
            >
              <span v-if="optionIndex != 0">、</span>{{ option.optionLabel }}({{
                item.answerCount == 0
                  ? '0%'
                  : (option.selectCount / item.answerCount).toFixed(2) * 100 +
                  '%'
              }})
            </span>
            <!-- 判断题 -->
            <span v-if="item.topicType == 2">
              对({{ item.truePrecent }}%)、错({{ item.falsePrecent }}%)
            </span>
          </div>
          <div
            class="topicDifficulty"
            v-if="checkedRadios.includes('试题数据')"
          >
            试题数据：答题次数：{{ item.answerCount }}次
            <span v-if="item.topicType < 4">
              ;准确率：{{ item.answerRange }}%
            </span>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button v-preventReClick @click="cancel">关闭</el-button>

      <el-button v-preventReClick type="primary" @click="submitForm">
        导出
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    exportData: [Object],
    open: Boolean,
    topicIds: [String],
    topics: [Array],
    indexId: [String, Number],
    ancestorsName: String,
    checkedRadios: [Array]
  },
  data() {
    return {
      difficulty: ['简单', '中等', '困难', '不限难度'],
      topicTypeArr: [
        '单选题',
        '多选题',
        '判断题',
        '填空题',
        '简答题',
        '操作题'
      ]
    }
  },
  watch: {
    open(e) {
      if (e) {
        let trues = [
          '正确',

          '对',

          '是',

          'yes',

          'y',

          '1',

          '对的',

          '是的',

          '好',

          '可以',

          '行',

          ' ok',

          'OK',

          '好的',

          '没错'
        ]
        for (let i = 0; i < this.topics.length; i++) {
          if (this.topics[i].topicType == 2) {
            if (
              trues.includes(this.topics[i].ccTopicOptionList[0].optionValue)
            ) {
              this.topics[i].truePrecent =
                this.topics[i].answerCount == 0
                  ? 0
                  : (
                  this.topics[i].ccTopicOptionList[0].selectCount /
                  this.topics[i].answerCount
                ).toFixed(2) * 100

              this.topics[i].falsePrecent =
                this.topics[i].answerCount == 0
                  ? 0
                  : 100 - this.topics[i].truePrecent
            } else {
              this.topics[i].falsePrecent =
                this.topics[i].answerCount == 0
                  ? 0
                  : (
                  this.topics[i].ccTopicOptionList[0].selectCount /
                  this.topics[i].answerCount
                ).toFixed(2) * 100
              this.topics[i].truePrecent =
                this.topics[i].answerCount == 0
                  ? 0
                  : 100 - this.topics[i].falsePrecent
            }
          }
        }
        console.log('topics', this.topics)
      }
    }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.$emit('update:open', false)
    },
    /** 提交按钮 */
    submitForm: function() {
      console.log(this.indexId, this.topicIds, this.ancestorsName)

      this.download(
        '/exam/teacher/topic/exportWord',
        this.exportData,
        `《${this.ancestorsName}》题库.docx`
      )
      this.$modal.msgSuccess('导出成功')
      this.$emit('update:open', false)
      this.$emit('topicExportPreviewReturn', true)
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog .el-dialog__footer .el-button + .el-button,
.el-dialog,
.el-dialog__footer,
.el-checkbox.is-bordered,
+ .el-checkbox.is-bordered {
  margin-left: 8px !important;
}

::v-deep .el-dialog__header {
  padding: 30px 0 20px 32px !important;

  .el-dialog__title {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    line-height: 25px;
    text-align: left;
    font-style: normal;
  }
}

::v-deep .el-dialog .el-dialog__footer .el-button {
  border-radius: 4px !important;
  width: 65px !important;
  height: 32px !important;
  line-height: 30px !important;
  text-align: center !important;
  padding: 0 !important;
  font-family: PingFangSC, PingFang SC !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  font-style: normal !important;
}

::v-deep .el-dialog .el-dialog__footer .dialog-footer {
  text-align: right !important;
}

::v-deep .el-dialog .el-dialog__footer {
  padding: 28px 56px 15px 0 !important;
}

::v-deep .el-dialog .el-dialog__body {
  padding: 20px 0 0 48px !important;
}

.topicBox {
  padding-right: 68px;
  height: calc(94vh - 250px);
  overflow-y: scroll;

  .topic {
    margin-bottom: 32px;

    .topicTitle {
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;

      .topicType {
      }

      .topicTitleText {
      }
    }

    .topicOptions {
      margin-top: 20px;

      .topicOptionItem:nth-of-type(1) {
        margin-top: 0;
      }

      .topicOptionItem {
        margin-top: 10px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;

        .topicOptionA {
        }

        .topicOptionText {
        }
      }
    }

    .topicAnswer {
      margin-top: 20px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;

      .topicAnswerText {
      }
    }

    .topicScore {
      margin-top: 10px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }

    .topicDifficulty {
      margin-top: 10px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }

    .topicAnalysis {
      margin-top: 10px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;

      .topicAnalysisText {
      }
    }
  }
}
</style>
